﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
	</head>
	<body>
		<div id="app">
			<el-row :gutter="15">
				<el-col :span="12" :offset="6">
					<el-form ref="productForm" :model="productForm" enctype="multipart/form-data" label-width="80px">
						<h1 align="center">创建商品</h1>
						<el-form-item label="商品名称">
							<el-input v-model="productForm.name" placeholder="请填入商品名称"></el-input>
						</el-form-item>

						<el-form-item label="商品类型">
							<el-select v-model="productForm.typeId" placeholder="请选择商品类型">
								<el-option
										v-for="item in pType"
										:key="item.id"
										:label="item.typename"
										:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品介绍">
							<el-input type="textarea" v-model="productForm.detail" placeholder="请填入详细信息"></el-input>
						</el-form-item>

						<el-form-item label="上传图片">
							<el-upload
									class="avatar-uploader"
									:limit="3"
									:on-preview="handlePreview"
									:on-remove="handleRemove"
									:file-list="fileList"
									:on-change="onchange"
									:auto-upload="false"
									accept=".jpg,.png,.jpeg"
									list-type="picture">
								<el-button size="small"  type="info">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过2000kb，文件数量最多三个</div>
							</el-upload>
						</el-form-item>

						<el-form-item>
							<el-button @click="submitUpload" type="primary">创建商品</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>

		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					productForm:{
						name:'',
						typeId:'',
						detail:'',
						imageUrl:[]
					},
					pType:[],
					fileList:[],
				},
				methods: {
					initType(){
						$.get("/pType/selectAllType",function (data){
							app.pType=data;
						})
					},
					submitUpload(){
						let format = new FormData();
						format.append("name",this.productForm.name)
						format.append("typeId",this.productForm.typeId)
						format.append("detail",this.productForm.detail)
						this.productForm.imageUrl.forEach(file => {
							format.append("imageUrl",file.raw)
						})
						$.ajax({
							url:'/product/createProduct',
							type:'post',
							data:format,
							processData: false, // 告诉jQuery不要去处理发送的数据
							contentType: false, // 告诉jQuery不要去设置Content-Type请求头
							success:function (data){
								if(data === "商品创建成功!！！"){
									app.$alert(data);
									window.parent.location.href="/"
									return;
								}
								app.$alert(data);
							}
						})
						// $.post("/product/createProduct",format,function (data){
						// 	app.$alert(data)
						// })

					},
					onchange(file,fileList){
						this.productForm.imageUrl.push(file)
					},
					handlePreview(){

					},
					handleRemove(file, fileList) {
						const newFileList = fileList.filter(item => item !== file);
						this.productForm.imageUrl = newFileList;
					},
					// beforeAvatarUpload(file){
					// 	const existFile = this.productForm.imageUrl.find(item => item.name === file.name);
					// 	if(existFile){
					// 		app.$alert("上传的图片文件名与已上传的图片文件名相同，请重新选择图片");
					// 		return false;
					// 	}
					// 	return true;
					// }
				},
				created(){
					this.initType();
				}
			});
		</script>
	</body>
</html>
